<template>
  <div class="carModelUpdateStatistic">
    <h4 class="withVerticleLineT4 title14">{{ $t('statisticsUpgrade') }}</h4>
    <div class="updateStatisticItems">
      <full-parent-dom-with-dask :tip="tip" :loading="loadingData"></full-parent-dom-with-dask>
      <a-row class="updateStatisticItem">
        <a-col :md="20" :sm="19">{{ $t('linkTaskCount') }}</a-col>
        <a-col :md="4" :sm="5" class="result">{{ linkTaskTotal }}</a-col>
      </a-row>
      <a-row class="updateStatisticItem" v-for="item in countStatuses" :key="item.value">
        <a-col :md="20" :sm="19">
          <span>{{ item.title }}</span>
          <question-mark-tip :tip-title="item.tip" v-if="item.tip">
          </question-mark-tip>
        </a-col>
        <a-col :md="4" :sm="5" class="result">{{ countValueObj[item.value] || 0 }}</a-col>
      </a-row>
      <a-row class="updateStatisticItem">
        <a-col :md="18" :sm="19">
          <span>{{ $t('sjcgl') }}</span>
          <question-mark-tip :tip-title="$t('sjcglTip')"></question-mark-tip>
        </a-col>
        <a-col :md="6" :sm="5" class="result">{{ successRate }}</a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import taskApi from '@/api/modules/task'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
export default {
  components: {
    QuestionMarkTip,
    FullParentDomWithDask
  },
  props: {
    time: {
      type: Number,
      default: 3571590
    },
    vehicleId: {
      type: String,
      default () {
        return ''
      }
    }
  },
  computed: {
    taskVehicleStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskVehicleStatusDictCode')
    },
    countValueObj () {
      const obj = {}
      this.countData.forEach(item => {
        obj[item.key] = item.count
      })
      return obj
    },
    linkTaskTotal () {
      let total = 0
      this.countData.forEach(item => {
        total += item.count
      })
      return total
    },
    successRate () {
      // 9是成功
      // eslint-disable-next-line prefer-destructuring
      const count = this.countValueObj[9]
      if (count) {
        return ((count / this.linkTaskTotal) * 100).toFixed(1) + '%'
      }
      return '-'
    }
  },
  data () {
    return {
      loadingData: false,
      tip: '',
      countData: [],
      countStatuses: [ {
        title: this.$t('sjcgcs'),
        value: '9'
      }, {
        title: this.$t('sjsbcs'),
        value: '8'
      }, {
        title: this.$t('jxzcs'),
        value: '2'
      }, {
        value: '1',
        title: this.$t('wjccs'),
        tip: this.$t('wjccsTip')
      }, {
        title: this.$t('wwccs'),
        tip: this.$t('wwccsTip'),
        value: '3'
      }]
    }
  },
  watch: {
    time: {
      handler (val) {
        if (val === 0) {
          return
        }
        this.initData()
      },
      immediate: true
    }
  },
  methods: {
    initData () {
      this.getPageDictData()
      this.getCountData()
    },
    getCountData () {
      this.countData = []
      if (!this.vehicleId) {
        return
      }
      this.loadingData = true
      taskApi.countVehicleGroupByUpdateStatus({ vehicleId: this.vehicleId }).then((res) => {
        this.countData = res.data
      }).finally(() => {
        this.loadingData = false
      })
    },
    getPageDictData () {
      ['getTaskVehicleStatusDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.updateStatisticItems {
  position: relative;
}
.updateStatisticItem {
    margin-top: 15px;
    .result {
        text-align: right;
    }
}
</style>
